<template>
  <div class="batch_import components_init">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="clearfixText"><i class="el-icon-s-order" />订单详情</span>
      </div>
      <div class="order_details_body">
        <div class="order_details_type">
          <div class="order_details">
            <div class="card_title">
              <span>基本信息</span>
            </div>
            <div class="details_table">
              <table
                border="1"
                cellspacing="0"
                cellpadding="5"
                borderColor="#ccc"
              >
                <tr class="table_header">
                  <td>订单号</td>
                  <td>运单号</td>
                  <td>单价（元/吨）</td>
                  <td>重量</td>
                  <td>订单金额</td>
                </tr>
                <tr class="table_body">
                  <td>{{ information.orderNo }}</td>
                  <td>{{ information.freightNo }}</td>
                  <td>{{ information.priceMoney }}</td>
                  <td>{{ information.loadingWeight }}</td>
                  <td>{{ information.totalMoney }}</td>
                </tr>
                <tr class="table_header">
                  <td>预付款</td>
                  <td>实付预付款</td>
                  <td>油卡</td>
                  <td>ETC</td>
                  <td>尾款</td>
                </tr>
                <tr class="table_body">
                  <td>{{ information.advanceMoney }}</td>
                  <td>{{ information.realAdvanceMoney }}</td>
                  <td>{{ information.oilMoney }}</td>
                  <td>{{ information.etcMoney }}</td>
                  <td>{{ information.tailMoney }}</td>
                </tr>
                <tr class="table_header">
                  <td>实付尾款</td>
                  <td>回单付</td>
                  <td>实付回单款</td>
                  <td>创建人</td>
                  <td>创单时间</td>
                </tr>
                <tr class="table_body">
                  <td>{{ information.realTailMoney }}</td>
                  <td>{{ information.receiptMoney }}</td>
                  <td>{{ information.realReceiptMoney }}</td>
                  <td>{{ information.createdUserName }}</td>
                  <td>{{ information.createdTime }}</td>
                </tr>
              </table>
            </div>
          </div>
          <div class="order_details">
            <div class="transport_details inline-block">
              <div class="card_title">
                <span>运输信息</span>
              </div>
              <div class="orderDetail_timeline">
                <el-timeline>
                  <el-timeline-item
                    v-for="(activity, index) in activities"
                    :key="index"
                    :icon="activity.icon"
                    :type="activity.type"
                    :color="activity.color"
                    :size="activity.size"
                    :timestamp="activity.timestamp"
                  >
                    <div>{{ activity.content }}</div>
                    <div class="content2">{{ activity.content2 }}</div>
                  </el-timeline-item>
                </el-timeline>
                <!-- <span class="distance">
                  <div>1593.46</div>
                  <div>km</div>
                </span> -->
              </div>
              <div class="logistics_information">
                <span>货物：{{ information.goodsName }}</span>
                <span>货物类型：{{ information.goodsType }}</span>
                <span>派单重量：{{ information.carrierWeight }}</span>
              </div>
              <div class="logistics_information" style="border: 0;">
                <span>装货重量：{{ information.loadingWeight }}</span>
                <span>卸货重量：{{ information.deliveryWeight }}</span>
                <span>差异重量：{{ information.damageWeight }}</span>
                <span>货损率：{{ (information.damageWeight / information.loadingWeight ) * 100 }}%</span>
              </div>
            </div>
            <div class="driver_details inline-block">
              <div class="card_title">
                <span>司机信息</span>
              </div>
              <div class="logistics_information" style="border:0;">
                <span>司机：{{ information.driverName }}</span>
                <span>电话：{{ information.driverPhone }}</span>
                <span>车牌号：{{ information.licenseNo }}</span>
                <span>车型车长：{{ `${information.typeName}${information.length}` }}</span>
              </div>
              <div class="driver_picture_details">
                <div>
                  <viewer
                    :src="information.frontImg"
                  />
                  <p>身份证正面</p>
                </div>
                <div>
                  <viewer
                    :src="information.backImg"
                  />
                  <p>身份证反面</p>
                </div>
                <div>
                  <viewer
                    :src="information.drivingLicenseImg"
                  />
                  <p>驾驶证</p>
                </div>
                <div>
                  <viewer
                    :src="information.licenseFirstImg"
                  />
                  <p>行驶证正页</p>
                </div>
                <div>
                  <viewer
                    :src="information.licenseSecondImg"
                  />
                  <p>行驶证副页</p>
                </div>
              </div>
            </div>
          </div>
          <div class="order_details">
            <div class="transport_details inline-block">
              <div class="card_title">
                <span>照片信息</span>
              </div>
              <div class="picture_detail" style="padding-left:10px;">
                <div class="loading_picture" style="font-size: 14px;">
                  提货照片
                </div>
                <div class="driver_picture_details" style="padding-right:30px;padding-left:0;margin-top:10px;">
                  <viewer
                    v-for="(item,index) in loadImagesList"
                    :key="index"
                    :src="item"
                  />
                </div>
                <div class="loading_picture" style="font-size: 14px;margin-top:30px">
                  卸货照片
                </div>
                <div class="driver_picture_details" style="padding-right:30px;padding-left:0;margin-top:10px;">
                  <viewer
                    v-for="(item,index) in unloadImagesList"
                    :key="index"
                    :src="item"
                  />
                </div>
              </div>
            </div>
            <div class="driver_details inline-block">
              <div>
                <div class="card_title">
                  <span>轨迹信息</span>
                </div>
                <div style="width:100%;padding:10px 20px 10px 20px;border:1px solid #e8e8e8;">
                  <div style="margin-bottom:10px;color:#6b6b6c;">最新定位：</div>
                  <div style="color:#6b6b6c;display: flex;justify-content: space-between;align-items:center;">
                    <span>定位时间：</span>
                    <el-button type="primary">轨迹回放</el-button>
                  </div>
                </div>
              </div>
              <div style="margin-top:15px">
                <div class="card_title">
                  <span>合同信息</span>
                </div>
                <div style="width:100%;padding-left:10px;border:1px solid #e8e8e8;height:50px;line-height: 50px;">
                  <el-button type="primary">查看托运合同</el-button>
                  <el-button type="primary">查看承运合同</el-button>
                </div>
              </div>
              <div style="margin-top:15px">
                <div class="card_title">
                  <span>评价信息</span>
                </div>
                <div style="width:100%;padding:15px 10px 5px 10px;border:1px solid #e8e8e8;font-size:14px;">
                  <div style="margin-bottom:10px;color:#6b6b6c;font-size:12px;">请给您的承运人评价</div>
                  <div>
                    按时结款<el-switch
                      v-model="value"
                      active-color="#13ce66"
                      inactive-color="#ff4949"
                      style="margin:0 40px;"
                    />
                    即使装卸货<el-switch
                      v-model="value"
                      active-color="#13ce66"
                      inactive-color="#ff4949"
                      style="margin:0 40px;"
                    />
                    货物不三超<el-switch
                      v-model="value"
                      active-color="#13ce66"
                      inactive-color="#ff4949"
                      style="margin:0 40px;"
                    />
                  </div>
                  <div style="margin-top:20px;">
                    <span style="font-weight: 700;">整体评价</span>
                    <el-rate
                      v-model="xingxingvalue"
                      show-text
                      style="display:inline-block;margin:0 30px;width: 155px;"
                    />
                    <el-button type="primary" size="mini" @click="$message.warning('功能还在开发中~~~~')">提交评价</el-button>
                  </div>
                </div>
              </div>
            </div>

          </div>
          <div class="order_details">
            <div class="card_title">
              <span>运单日志</span>
            </div>
            <el-table
              :data="freightLogsTable"
              border
              style="width: 100%"
            >
              <el-table-column
                prop="createdTime"
                label="时间"
              />
              <el-table-column
                prop="createdUserName"
                label="上报人"
              />
              <el-table-column
                label="操作"
              >
                <template slot-scope="{row}">
                  {{ operationStatus(row.operationType) }}
                </template>
              </el-table-column>
              <el-table-column
                label="订单状态"
              >
                <template slot-scope="{row}">
                  {{ orderStatus(row.targetStatus) }}
                </template>
              </el-table-column>
            </el-table>
          </div>

        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import viewer from '@/components/elImage/index.vue'
import { getWaybillDetail } from '@/api/tms/waybill'
export default {
  components: {
    viewer
  },
  data() {
    return {
      freightNo: '',
      // 创建订单表单
      formInline: {
        user: ''
      },
      // 弹窗表单
      dialogHistoryOrderForm: {
        user: ''
      },
      value: true,
      xingxingvalue: null,
      activities: [],
      information: {},
      loadImagesList: [],
      unloadImagesList: [],
      freightLogsTable: [],
      dialogTableVisible: false
    }
  },
  computed: {
    operationStatus: function() {
      return (val) => {
        if (val === 'CREATE') {
          return '创建订单'
        } else if (val === 'SEND_DRIVER') {
          return '派单给司机'
        } else if (val === 'SEND_FLEET') {
          return '派单给车队'
        } else if (val === 'STOP') {
          return '终止'
        } else if (val === 'CANCEL') {
          return '取消'
        } else if (val === 'ACCEPT') {
          return '接单'
        } else if (val === 'LOADING') {
          return '提货'
        } else if (val === 'UNLOADING') {
          return '送达'
        } else if (val === 'DONE') {
          return '签收'
        } else if (val === 'ESTIMATE') {
          return '评价承运人'
        }
      }
    },
    orderStatus: function() {
      return (val) => {
        if (val === 'CANCEL') {
          return '已取消'
        } else if (val === 'PENDING') {
          return '待装货'
        } else if (val === 'PROCESSING') {
          return '运输中'
        } else if (val === 'COMPLETE') {
          return '已到达'
        } else if (val === 'DONE') {
          return '已完成'
        }
      }
    }
  },
  async created() {
    this.freightNo = this.$route.query.freightNo
    await this.getWaybillDetail()
  },
  mounted() {
  },
  methods: {
    async getWaybillDetail() {
      const res = await getWaybillDetail(this.freightNo)
      this.information = res
      console.log(1321321231, this.information.licenseFirstImg)
      this.activities = [
        {
          content: res.loadCompany,
          content2: `${res.loadProvince} ${res.loadCity} ${res.loadDistrict} ${res.loadAddress}`,
          timestamp: `${res.planLoadDate} ${res.planLoadTimePeriod}`,
          color: '#2297ef'
        },
        {
          content: res.unloadCompany,
          content2: `${res.unloadProvince} ${res.unloadCity} ${res.unloadDistrict} ${res.unloadAddress}`,
          timestamp: `${res.planUnloadDate} ${res.planUnloadTimePeriod}`,
          color: '#ff9624'
        }
      ]
      res.freightAttachments.forEach(item => {
        if (item.attachmentType === 'LOADING') {
          this.loadImagesList = item.attachmentUrl.split(',')
        } else if (item.attachmentType === 'UNLOADING') {
          this.unloadImagesList = item.attachmentUrl.split(',')
        }
      })
      this.freightLogsTable = res.freightLogs
    },
    handlesSucces() {},
    handlesError() {},
    handleChange(val) {
      console.log(val)
    },
    selectHistoryOrder(row) {
      console.log(row)
    },
    dialogSelect() {}
  }
}
</script>

<style lang='scss'>
.batch_import {
  .logistics_information {
    font-size: 15px;
    height: 80px;
    border-top: 1.5px dashed black;
    border-bottom: 1.5px dashed black;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0 60px 0 0;
  }
  .driver_picture_details{
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-left: 10px;
    div{
      p{
        text-align: center;
      }
    }
  }
  table {
    td {
      padding: 10px 0;
    }
  }
  .text {
    font-size: 14px;

  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both;
  }
  // 卡片样式
  .order_details_body {
    .order_details_type {
      .order_details {
        width: 100%;
        margin-bottom: 20px;
        .inline-block {
          width: 50%;
          display: inline-block;
          vertical-align: top;
        }
        .transport_details {
          .orderDetail_timeline {
            position: relative;
            .distance {
              position: absolute;
              top: 35%;
              div {
                text-align: center;
                color: #99a6c4;
              }
            }
          }
          .el-timeline {
            margin-top: 15px;
            margin-left: 35px;
            .el-timeline-item {
              .el-timeline-item__node {
                left: -8px;
                width: 25px;
                height: 25px;
              }
              .el-timeline-item__wrapper {
                .el-timeline-item__content {
                  font-weight: 700;
                  font-size: 16px;
                  .content2 {
                    margin-top: 10px;
                  }
                }
                .el-timeline-item__timestamp {
                  font-size: 14px;
                }
              }
            }
            .el-timeline-item:nth-child(1) {
              padding-bottom: 100px;
            }
          }
          // 物流信息
        }
      }
    }
  }
}
</style>

